User:SMcCandlish/Sandbox/Styling ordered and unordered list markers
Some test cases for styling list appearance. Some results are not necessarily as expected, because the site-wide stylesheet is using a list-style-image for unordered lists, and this overrides list-style-type. While list-style will override that, this is not always desirable; in such cases, one will want to use list-style-image: none; then a list-style-type.
Unordered list test cases
[edit]UL-only
<ul style="list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
FAIL
LI only:
<ul style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
FAIL
Both (redundant):
<ul style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
FAIL
UL, using list-style: none instead:
<ul style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
OK
LI, using list-style: none instead:
<ul> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ul>
- Foo
- Bar
OK
Both (redundant), using list-style-type: square:
<ul style="list-style-type: square;"> <li style="list-style-type: square;">Foo</li> <li style="list-style-type: square;">Bar</li> </ul>
- Foo
- Bar
FAIL
This means neither alone will work either.
UL, using list-style: square instead:
<ul style="list-style: square;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
OK
LI, using list-style: square instead:
<ul> <li style="list-style: square;">Foo</li> <li style="list-style: square;">Bar</li> </ul>
- Foo
- Bar
OK
Both (redundant), clearing with list-style-image: none first:
<ul style="list-style-image: none; list-style-type: none;"> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
OK
This means list-style-type: square will also work here, but we need to see if these work non-redundantly.
UL, clearing with list-style-image: none first:
<ul style="list-style-image: none; list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
OK
LI, clearing with list-style-image: none first:
<ul> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
OK
Default (HTML)
<ul> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
Default (Wikimarkup *):
*Foo *Bar
- Foo
- Bar
Both specific and general code work fine with ordered lists
[edit]These are not using an image in the default stylesheet, so there is nothing to override.
ALL of these work.
OL-only
<ol style="list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ol>
- Foo
- Bar
LI only:
<ol> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol>
- Foo
- Bar
Both (redundant):
<ol style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol>
- Foo
- Bar
OL, using list-style instead:
<ol style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ol>
- Foo
- Bar
LI, using list-style instead:
<ol> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol>
- Foo
- Bar
Both (redundant):
<ol style="list-style: none;"> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol>
- Foo
- Bar
Default (HTML)
<ol> <li>Foo</li> <li>Bar</li> </ol>
- Foo
- Bar
Default (Wikimarkup #):
#Foo #Bar
- Foo
- Bar